<template>
  <div>
    <PageSearchTableWrappe>
      <template #search>
        <a-form layout="inline" :model="searchValue">
          <a-form-item>
            <a-input v-model:value="searchValue.filter" allowClear placeholder="关键字"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">查询 </a-button>
          </a-form-item>
        </a-form>
      </template>

      <template #table>
        <a-table :columns="columns" :data-source="data" :loading="dataLoading" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <span>
                <a-popconfirm title="确认强退吗?" @confirm="handleDelete(record)">
                  <a href="#">强退</a>
                </a-popconfirm>
              </span>
            </template>
          </template>
        </a-table>
        <Pagination
          v-show="total > 0"
          :total="total"
          v-model:page="searchValue.page"
          v-model:limit="searchValue.limit"
          @pagination="fetchData"
        />
      </template>
    </PageSearchTableWrappe>
  </div>
</template>
<script lang="ts">
export default {
  name: 'OnlineUser',
};
</script>
<script setup lang="ts">
import { ref, unref, onMounted, computed, h } from 'vue';
import { Tag, message } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { getOnlineUserListPage, Kickout } from '/@/api/sys/monitor';
import { PageSearchTableWrappe } from '/@/components/Page';
import { Pagination } from '/@/components/Pagination';
import { formatToDateTime } from '/@/utils/dateUtil';

const columns = [
  {
    title: '账号',
    dataIndex: 'username',
  },
  {
    title: '姓名',
    dataIndex: 'realName',
  },

  {
    title: '部门',
    dataIndex: 'deptName',
  },
  {
    title: '登录时间',
    dataIndex: 'loginTime',
    customRender: ({ text }) => {
      return formatToDateTime(text);
    },
  },
  {
    title: 'ip',
    dataIndex: 'ip',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: 120,
  },
];
const total = ref(0);
const data = ref([]);
const searchValue = ref({
  page: 1,
  limit: 10,
  filter: '',
});

const dataLoading = ref(false);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const res = await getOnlineUserListPage(unref(searchValue));
    data.value = res.items;
    total.value = res.records;
    //pagination.value.pageSize = res.pageSize;
    //pagination.value.current = res.page;
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};
onMounted(() => {
  fetchData();
});

const handleSearch = () => {
  searchValue.value.page = 1;
  fetchData();
};

const handleDelete = async (record: Recordable) => {
  const { token } = record;
  await Kickout({ token: token });
  message.success('强退成功');
  handleSearch();
};
</script>
